<template>
	<a-card>
		<div :class="advanced ? 'search' : null">
			<a-form layout="horizontal" :form="searchForm">
				<div :class="advanced ? null: 'fold'">
					<a-row>
						<a-col :md="6" :sm="24">
							<a-form-item label="用户名" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
								<a-input placeholder="请输入用户名" allowClear v-model="searchForm.username" />
							</a-form-item>
						</a-col>
						<a-col :md="6" :sm="24">
							<a-form-item label="手机号" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
								<a-input placeholder="请输入手机号" allowClear v-model="searchForm.mobile" />
							</a-form-item>
						</a-col>
						<a-col :md="4">
							<span style="float: right; margin-top: 3px;">
								<a-button type="primary" @click="handleSearch">查询</a-button>
								<a-button style="margin-left: 8px" type="primary" @click="handleAddSon">添加子账号</a-button>
								<a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
							</span>
						</a-col>
					</a-row>
				</div>
			</a-form>
		</div>
		<div>
			<el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border default-expand-all
				:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
				<el-table-column prop="create_user_id" label="ID" sortable width="180" />
				<el-table-column prop="username" label="用户名" sortable width="180" />
				<el-table-column prop="mobile" label="手机号" />
				<el-table-column prop="create_time" label="创建时间" />
				<el-table-column label="是否启用" >
					<template slot-scope="scope">
						{{scope.row.is_show==1?'已启用':'未启用'}}
					</template>
				</el-table-column>
				<el-table-column prop="remark" label="备注" />
				<el-table-column fixed="right" label="操作">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="flex align-center justify-end custom_page">
				<span class="total">共{{ pageTotal }}页</span>
				<span class="total">共{{ total }}条</span>
				<el-pagination class="text-right" prev-text="上一页" next-text="下一页" :page-size="pageSize"
					:page-sizes="pageList" :total="total" background :layout="layout" :current-page.sync="page"
					@current-change="handleCurrentChange" @size-change="handleSizeChange" />
			</div>
		</div>
		<add-account ref="addAccount"></add-account>
	</a-card>
</template>

<script>
	import {
		saleSonList
	} from '@/api/extension'
	export default {
		name: 'account',
		components: {
			addAccount: () => import('./components/addAccount')
		},
		data() {
			return {
				advanced: true,
				searchForm: {
					username: '',
					mobile: ''
				},
				tableData: [],
				total:0,
				page: 1,
				pageSize: 10,
				pageList: [5, 10, 20, 50, 100]
			}
		},
		computed: {
			pageTotal() {
				const num = Math.ceil(this.total / this.pageSize)
				return num > 0 ? num : 1
			},
			layout() {
				if (this.total === 0) {
					return 'prev, pager, next'
				}
				if (this.pageTotal > 1) {
					return 'sizes, prev, pager, next, jumper'
				}
				return 'sizes, prev, pager, next'
			}
		},
		authorize: {
			deleteRecord: 'delete'
		},
		mounted() {
			this.getList()
		},
		methods: {
			getList(flag) {
				if(!flag){
					this.tableData=[]
				}
				const {
					page,
					pageSize
				} = {
					page: this.page,
					pageSize: this.pageSize
				}
				saleSonList({
					page,
					pageSize,
					username:this.searchForm.username,
					mobile:this.searchForm.mobile
				}).then(res => {
					this.tableData = res.data
					this.total=res.total
				})
				console.log(this.tableData);
			},
			handleClick(item) {
				console.log(item);
			},
			handleAddSon() {
				this.$refs.addAccount.dialogVisible = true
			},
			handleSearch() {
				console.log(123);
				this.getList()
			},
			handleReset() {
				this.searchForm = {
					username: '',
					mobile: ''
				}
			},
			search(){
				this.$refs.currentPage.page = 1
				this.getList()
			},
			changePageSize(val) {
				this.pageSize = val
				if (this.pageList.indexOf(val) === -1) {
					this.pageList.unshift(val)
				}
			},
			handleSizeChange(val) {
				this.page = 1
				this.pageSize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.page = val
				this.getList()
			}
		}
	}
</script>

<style lang="less" scoped>
	.search {
		margin-bottom: 0px;
	}

	.fold {
		width: calc(100% - 216px);
		display: inline-block
	}

	.operator {
		margin-bottom: 18px;
	}

	@media screen and (max-width: 900px) {
		.fold {
			width: 100%;
		}
	}
	.custom_page {
		margin-top: 15px;
	
		.total {
			margin-right: 10px;
		}
	
		.page_btn {
			color: #333333;
			background: #ffffff;
			border: 1px solid #eeeeee;
			font-size: 14px;
			padding-left: 12px;
			padding-right: 12px;
			min-width: 30px;
			border-radius: 2px;
			height: 28px;
			vertical-align: top;
			cursor: pointer;
		}
	
		.el-pagination__jump {
			margin-left: 10px;
			margin-right: 10px;
		}
	}
</style>
